<template>
  <div class="sentence-app" :class="currentTheme">
    <!-- 顶部导航栏 -->
    <header class="header">
      <h1 class="title">墨韵语录</h1>
      <div class="controls">
        <select v-model="currentTheme" class="theme-selector">
          <option value="mature">沉稳经典风(中年人喜欢)</option>
          <option value="youth">时尚潮流风(年轻人喜欢)</option>
          <option value="kids">活泼可爱风(小孩子喜欢)</option>
        </select>
      </div>
    </header>

    <!-- 文字风格设置 -->
    <div class="style-panel" v-show="showStylePanel">
      <div class="style-controls">
        <div class="control-group">
          <label>字体:</label>
          <select v-model="textStyle.fontFamily">
            <option value="KaiTi">楷书</option>
            <option value="XingShu">行书</option>
            <option value="LiShu">隶书</option>
            <option value="SimSun">宋体</option>
          </select>
        </div>
        <div class="control-group">
          <label>字号:</label>
          <select v-model="textStyle.fontSize">
            <option value="small">小</option>
            <option value="medium">中</option>
            <option value="large">大</option>
          </select>
        </div>
        <div class="control-group">
          <label>颜色:</label>
          <select v-model="textStyle.color">
            <option value="black">黑色</option>
            <option value="ink">墨黑</option>
            <option value="gold">金色</option>
          </select>
        </div>
      </div>
    </div>

    <!-- AI生成输入区 -->
    <div class="ai-input-panel">
      <div class="input-group">
        <input 
          v-model="userInput" 
          type="text" 
          placeholder="输入人物、主题或关键词，AI为您生成专属语录..."
          class="ai-input"
          @keyup.enter="generateQuote"
        />
        <button @click="generateQuote" class="btn-generate" :disabled="generating">
          {{ generating ? '生成中...' : '生成语录' }}
        </button>
      </div>
    </div>

    <!-- 主内容区 -->
    <main class="main-content">
      <!-- 操作工具栏 -->
      <div class="toolbar">
        <button @click="toggleStylePanel" class="btn-style">风格设置</button>
        <button @click="toggleBatchMode" class="btn-batch" :class="{active: batchMode}">
          {{ batchMode ? '取消批选' : '批量选择' }}
        </button>
        <button v-if="batchMode" @click="toggleSelectAll" class="btn-select-all" :class="{active: isAllSelected}">
          {{ isAllSelected ? '取消全选' : '全选' }}
        </button>
        <button v-if="batchMode && selectedCards.length" @click="batchDownload" class="btn-download">
          下载选中({{ selectedCards.length }})
        </button>
      </div>

      <!-- 语录卡片网格 -->
      <div class="cards-grid">
        <div 
          v-for="quote in quotes" 
          :key="quote.id"
          class="card-wrapper"
          :class="{ selected: selectedCards.includes(quote.id) }"
          @click="batchMode ? toggleSelect(quote.id) : null"
        >
          <div class="quote-card" :ref="`card-${quote.id}`" :style="getCardStyle(quote)">
            <div class="quote-background" :style="{backgroundImage: `url(${quote.background})`}"></div>
            <div class="quote-content">
              <p class="quote-text">{{ quote.text }}</p>
              <p v-if="quote.author" class="quote-author">—— {{ quote.author }}</p>
              <p v-if="quote.explanation" class="quote-explanation">{{ quote.explanation }}</p>
            </div>
          </div>
          <div class="card-actions" v-if="!batchMode">
            <button @click="downloadCard(quote.id)" class="btn-download-single">下载</button>
            <button @click="toggleFavorite(quote.id)" class="btn-favorite" :class="{active: quote.favorite}">
              {{ quote.favorite ? '已收藏' : '收藏' }}
            </button>
          </div>
          <div v-if="batchMode" class="batch-checkbox">
            <input type="checkbox" :checked="selectedCards.includes(quote.id)" />
          </div>
        </div>
      </div>
    </main>

    <!-- 加载提示 -->
    <div v-if="loading" class="loading-overlay">
      <div class="loading-content">
        <p>{{ loadingText }}</p>
        <div class="progress-bar">
          <div class="progress" :style="{width: progress + '%'}"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

<script>

export default {
  name: 'SentenceApp',
  data() {
    return {
      currentTheme: 'mature',
      showStylePanel: false,
      batchMode: false,
      selectedCards: [],
      isAllSelected: false,
      loading: false,
      loadingText: '',
      progress: 0,
      userInput: '',
      generating: false,
      nextId: 11,
      textStyle: {
        fontFamily: 'KaiTi',
        fontSize: 'medium',
        color: 'ink'
      },
      quotes: [
        { id: 1, text: '山重水复疑无路，柳暗花明又一村', author: '陆游', favorite: false },
        { id: 2, text: '海内存知己，天涯若比邻', author: '王勃', favorite: false },
        { id: 3, text: '落红不是无情物，化作春泥更护花', author: '龚自珍', favorite: false },
        { id: 4, text: '会当凌绝顶，一览众山小', author: '杜甫', favorite: false },
        { id: 5, text: '长风破浪会有时，直挂云帆济沧海', author: '李白', favorite: false },
        { id: 6, text: '千磨万击还坚劲，任尔东西南北风', author: '郑燮', favorite: false },
        { id: 7, text: '不畏浮云遮望眼，只缘身在最高层', author: '王安石', favorite: false },
        { id: 8, text: '宝剑锋从磨砺出，梅花香自苦寒来', author: '佚名', favorite: false },
        { id: 9, text: '天行健，君子以自强不息', author: '周易', favorite: false },
        { id: 10, text: '路漫漫其修远兮，吾将上下而求索', author: '屈原', favorite: false }
      ],
      quotes: [
        { 
          id: 1, 
          text: '山重水复疑无路，柳暗花明又一村', 
          author: '陆游', 
          favorite: false,
          background: 'https://img.zcool.cn/community/01a9a25af5f56ca801216518431c7a.jpg@1280w_1l_2o_100sh.jpg',
          explanation: '在人生遇到困境时，往往某个转弯处就是某个柳暗花明的新天地'
        },
        { 
          id: 2, 
          text: '海内存知己，天涯若比邻', 
          author: '王勃', 
          favorite: false,
          background: 'https://img.zcool.cn/community/01d0f65af5f56ca801216518d8c7e9.jpg@1280w_1l_2o_100sh.jpg',
          explanation: '即使距离再远，只要心灵相通，也如同近在咫尺'
        },
        { 
          id: 3, 
          text: '落红不是无情物，化作春泥更护花', 
          author: '龚自珍', 
          favorite: false,
          background: 'https://img.zcool.cn/community/01f1c65af5f56ca801216518a3b341.jpg@1280w_1l_2o_100sh.jpg',
          explanation: '即使几经消亡，也能以另一种方式继续存在并贡献价值'
        },
        { 
          id: 4, 
          text: '会当凌绝顶，一览众山小', 
          author: '杜甲', 
          favorite: false,
          background: 'https://img.zcool.cn/community/01a0a85af5f56ca801216518a3b341.jpg@1280w_1l_2o_100sh.jpg',
          explanation: '登上高峰，方能看到更广阔的天地，达到更高的境界'
        },
        { 
          id: 5, 
          text: '长风破浪会有时，直挂云帆济沧海', 
          author: '李白', 
          favorite: false,
          background: 'https://img.zcool.cn/community/01d0f65af5f56ca801216518d8c7e9.jpg@1280w_1l_2o_100sh.jpg',
          explanation: '只要有恒心和信念，终会等到风平浪静的时候，扫除一切困难'
        }
      ]
    }
  },
  mounted() {
    this.loadUserPreferences()
  },
  methods: {
    toggleStylePanel() {
      this.showStylePanel = !this.showStylePanel
    },
    toggleBatchMode() {
      this.batchMode = !this.batchMode
      this.selectedCards = []
      this.isAllSelected = false
    },
    toggleSelect(id) {
      const index = this.selectedCards.indexOf(id)
      if (index > -1) {
        this.selectedCards.splice(index, 1)
        this.isAllSelected = false
      } else {
        this.selectedCards.push(id)
        this.isAllSelected = this.selectedCards.length === this.quotes.length
      }
    },
    
    toggleSelectAll() {
      if (this.isAllSelected) {
        // 取消全选
        this.selectedCards = []
        this.isAllSelected = false
      } else {
        // 全选
        this.selectedCards = this.quotes.map(quote => quote.id)
        this.isAllSelected = true
      }
    },
    toggleFavorite(id) {
      const quote = this.quotes.find(q => q.id === id)
      if (quote) {
        quote.favorite = !quote.favorite
        this.saveUserPreferences()
      }
    },
    getCardStyle(quote) {
      const fontSizeMap = { small: '14px', medium: '16px', large: '18px' }
      const colorMap = { black: '#000', ink: '#2c2c2c', gold: '#d4af37' }
      
      return {
        fontFamily: this.textStyle.fontFamily,
        fontSize: fontSizeMap[this.textStyle.fontSize],
        color: colorMap[this.textStyle.color]
      }
    },
    async downloadCard(id) {
      this.loading = true
      this.loadingText = '正在生成卡片...'
      this.progress = 0
      
      try {
        const element = this.$refs[`card-${id}`][0]
        const quote = this.quotes.find(q => q.id === id)
        
        this.progress = 50
        
        // 直接使用html2canvas库
        const html2canvas = await import('html2canvas')
        const canvas = await html2canvas.default(element, {
          scale: 2,
          useCORS: true,
          allowTaint: true,
          backgroundColor: null
        })
        
        this.progress = 80
        const imgData = canvas.toDataURL('image/png')
        const fileName = `墨韵语录-${quote.author}-${id}`
        
        // 创建下载链接
        const link = document.createElement('a')
        link.href = imgData
        link.download = `${fileName}.png`
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        
        this.progress = 100
        setTimeout(() => {
          this.loading = false
        }, 500)
        
      } catch (error) {
        console.error('下载失败:', error)
        this.loading = false
        alert('下载失败，请重试')
      }
    },
    async batchDownload() {
      if (!this.selectedCards.length) return
      
      this.loading = true
      this.loadingText = '正在批量生成卡片...'
      this.progress = 0
      
      try {
        const JSZipModule = await import('jszip')
        const JSZip = JSZipModule.default
        const zip = new JSZip()
        
        // 创建一个异步函数来生成单个卡片的图片
        const generateCardImage = async (element) => {
          // 使用html2canvas库
          const html2canvas = await import('html2canvas')
          const canvas = await html2canvas.default(element, {
            scale: 2,
            useCORS: true,
            allowTaint: true,
            backgroundColor: null
          })
          
          // 返回base64数据
          return canvas.toDataURL('image/png').split(',')[1]
        }
        
        for (let i = 0; i < this.selectedCards.length; i++) {
          const id = this.selectedCards[i]
          const element = this.$refs[`card-${id}`][0]
          const quote = this.quotes.find(q => q.id === id)
          
          this.progress = (i / this.selectedCards.length) * 80
          
          try {
            const base64Data = await generateCardImage(element)
            const fileName = `墨韵语录-${quote.author}-${id}.png`
            zip.file(fileName, base64Data, { base64: true })
          } catch (err) {
            console.error(`卡片 ${id} 生成失败:`, err)
            // 继续处理其他卡片
          }
        }
        
        this.progress = 90
        const content = await zip.generateAsync({ type: 'blob' })
        
        const link = document.createElement('a')
        link.download = '墨韵语录卡片集.zip'
        link.href = URL.createObjectURL(content)
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        
        this.progress = 100
        setTimeout(() => {
          this.loading = false
          this.batchMode = false
          this.selectedCards = []
          this.isAllSelected = false
        }, 500)
      } catch (error) {
        console.error('批量下载失败:', error)
        this.loading = false
        alert('批量下载失败，请重试')
      }
    },
    loadUserPreferences() {
      const saved = localStorage.getItem('sentence-preferences')
      if (saved) {
        const prefs = JSON.parse(saved)
        this.textStyle = { ...this.textStyle, ...prefs.textStyle }
        this.currentTheme = prefs.theme || 'guofeng'
      }
    },
    saveUserPreferences() {
      const prefs = {
        textStyle: this.textStyle,
        theme: this.currentTheme,
        favorites: this.quotes.filter(q => q.favorite).map(q => q.id)
      }
      localStorage.setItem('sentence-preferences', JSON.stringify(prefs))
    },
    async generateQuote() {
      if (!this.userInput.trim()) {
        alert('请输入人物、主题或关键词')
        return
      }
      
      this.generating = true
      
      try {
        const response = await this.callLLMAPI(this.userInput)
        
        // 随机选择一个背景图
        const backgrounds = [
          'https://img.zcool.cn/community/01a9a25af5f56ca801216518431c7a.jpg@1280w_1l_2o_100sh.jpg',
          'https://img.zcool.cn/community/01d0f65af5f56ca801216518d8c7e9.jpg@1280w_1l_2o_100sh.jpg',
          'https://img.zcool.cn/community/01f1c65af5f56ca801216518a3b341.jpg@1280w_1l_2o_100sh.jpg',
          'https://img.zcool.cn/community/01a0a85af5f56ca801216518a3b341.jpg@1280w_1l_2o_100sh.jpg'
        ]
        
        const randomBackground = backgrounds[Math.floor(Math.random() * backgrounds.length)]
        
        const newQuote = {
          id: this.nextId++,
          text: response.text,
          author: response.author,
          favorite: false,
          background: randomBackground,
          explanation: response.explanation || `关于"${this.userInput}"的哲理思考`
        }
        
        this.quotes.unshift(newQuote)
        this.userInput = ''
      } catch (error) {
        console.error('生成语录失败:', error)
        this.showError(error.message || '生成失败，请重试')
      } finally {
        this.generating = false
      }
    },
    async callLLMAPI(input) {
      try {
        const prompt = `请根据"${input}"生成一句富有哲理或启发性的语录，并提供合适的作者和语录含义解释。
要求：
1. 语录要简洁有力，富有诗意
2. 如果是人物，生成符合其风格的语录
3. 如果是主题，生成相关的励志或哲理语录
4. 返回JSON格式：{"text": "语录内容", "author": "作者名", "explanation": "语录含义解释"}
5. 语录长度控制在50字以内
6. 解释要简洁有力，30字左右`
        
        const axios = await import('axios')
        const response = await axios.default.post('https://api.siliconflow.cn/v1/chat/completions', {
          model: 'deepseek-ai/DeepSeek-R1-Distill-Qwen-32B',
          messages: [{
            role: 'user',
            content: prompt
          }],
          stream: false,
          max_tokens: 512,
          temperature: 0.7
        }, {
          headers: {
            Authorization: 'Bearer ' + process.env.VUE_APP_API_KEY,
            'Content-Type': 'application/json'
          }
        })
        
        const content = response.data.choices[0].message.content
        return JSON.parse(content)
      } catch (error) {
        throw new Error('语录生成失败: ' + error.message)
      }
    },
    showError(message) {
      alert(message)
    }
  },

  watch: {
    textStyle: {
      handler() {
        this.saveUserPreferences()
      },
      deep: true
    },
    currentTheme() {
      this.saveUserPreferences()
    }
  }
}
</script>

<style scoped>
.sentence-app {
  min-height: 100vh;
  background: #f5f5dc;
  font-family: 'KaiTi', serif;
}

/* 中年人喜欢的沉稳经典风格 */
.mature {
  background: url('https://img.zcool.cn/community/01d0f65af5f56ca801216518d8c7e9.jpg@1280w_1l_2o_100sh.jpg') center center;
  background-size: cover;
  background-attachment: fixed;
}

.mature .quote-card {
  background: rgba(245, 240, 230, 0.9);
  border: 1px solid #8b4513;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
}

.mature .quote-content {
  background: rgba(245, 240, 230, 0.8);
  color: #3a3226;
}

.mature .quote-text {
  font-family: 'SimSun', serif;
  font-weight: 400;
}

.mature .quote-author {
  color: #8b4513;
}

.mature .btn-style, 
.mature .btn-batch, 
.mature .btn-download,
.mature .btn-generate {
  background: #8b4513;
  color: #f5f0e6;
}

.mature .btn-style:hover, 
.mature .btn-batch:hover, 
.mature .btn-download:hover,
.mature .btn-generate:hover:not(:disabled) {
  background: #6b3000;
}

/* 年轻人喜欢的时尚潮流风格 */
.youth {
  background: linear-gradient(135deg, #8a2387, #e94057, #f27121);
}

.youth .quote-card {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border: none;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}

.youth .quote-content {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 15px;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  color: white;
}

.youth .quote-text {
  font-family: 'Microsoft YaHei', sans-serif;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.youth .quote-author {
  color: rgba(255, 255, 255, 0.9);
}

.youth .btn-style, 
.youth .btn-batch, 
.youth .btn-download,
.youth .btn-generate {
  background: linear-gradient(45deg, #8a2387, #e94057);
  color: white;
  border-radius: 30px;
}

.youth .btn-style:hover, 
.youth .btn-batch:hover, 
.youth .btn-download:hover,
.youth .btn-generate:hover:not(:disabled) {
  background: linear-gradient(45deg, #7a1377, #d93047);
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* 小孩子喜欢的活泼可爱风格 */
.kids {
  background: url('https://img.zcool.cn/community/01f1c65af5f56ca801216518a3b341.jpg@1280w_1l_2o_100sh.jpg') center center;
  background-size: cover;
  background-attachment: fixed;
}

.kids .quote-card {
  background: rgba(255, 255, 255, 0.85);
  border: 4px solid #FFD700;
  border-radius: 25px;
  box-shadow: 0 10px 30px rgba(255, 215, 0, 0.4);
  position: relative;
  overflow: hidden;
}

.kids .quote-content {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  border: 2px dashed #FF6B6B;
  color: #FF6B6B;
}

.kids .quote-text {
  font-family: 'Comic Sans MS', 'Microsoft YaHei', cursive;
  font-size: 1.3rem;
}

.kids .quote-author {
  color: #4CAF50;
  font-weight: bold;
}

.kids .btn-style, 
.kids .btn-batch, 
.kids .btn-download,
.kids .btn-generate {
  background: linear-gradient(45deg, #FF6B6B, #FFD700);
  color: white;
  border-radius: 25px;
  font-size: 1.1rem;
  font-weight: bold;
}

.kids .btn-style:hover, 
.kids .btn-batch:hover, 
.kids .btn-download:hover,
.kids .btn-generate:hover:not(:disabled) {
  background: linear-gradient(45deg, #FF5B5B, #FFCC00);
  transform: scale(1.05) rotate(2deg);
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

.title {
  font-size: 1.8rem;
  margin: 0;
  font-weight: bold;
}

.mature .title {
  color: #8b4513;
}

.youth .title {
  background: linear-gradient(45deg, #8a2387, #e94057);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.kids .title {
  background: linear-gradient(45deg, #FF6B6B, #FFD700);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  font-family: 'Comic Sans MS', 'Microsoft YaHei', cursive;
}

.theme-selector {
  padding: 0.5rem;
  border: 1px solid #d4af37;
  border-radius: 4px;
  background: #fff;
}

.style-panel {
  padding: 1rem;
  background: rgba(255,255,255,0.95);
  border-bottom: 1px solid #ddd;
}

.style-controls {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.control-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.control-group select {
  padding: 0.25rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.toolbar {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  justify-content: center;
}

.btn-style, .btn-batch, .btn-download, .btn-select-all {
  padding: 0.75rem 1.25rem;
  border: none;
  background: linear-gradient(45deg, #d4af37, #f1c40f);
  color: white;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  font-weight: 500;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.btn-style:hover, .btn-batch:hover, .btn-download:hover, .btn-select-all:hover {
  background: linear-gradient(45deg, #c19b2e, #e3b70f);
  transform: translateY(-2px);
  box-shadow: 0 7px 14px rgba(0, 0, 0, 0.15);
}

.btn-batch.active, .btn-select-all.active {
  background: linear-gradient(45deg, #c19b2e, #e3b70f);
  color: #fff;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2);
  transform: translateY(1px);
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  padding: 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

.card-wrapper {
  position: relative;
  transition: transform 0.3s;
}

.mature .card-wrapper:hover {
  transform: translateY(-5px);
  z-index: 10;
}

.youth .card-wrapper:hover {
  transform: translateY(-10px) scale(1.03);
  z-index: 10;
}

.kids .card-wrapper:hover {
  transform: translateY(-8px) scale(1.05) rotate(1deg);
  z-index: 10;
}

.card-wrapper.selected {
  transform: scale(0.95);
  opacity: 0.8;
}

.quote-card {
  aspect-ratio: 9/16;
  padding: 2rem;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.quote-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.2;
  z-index: 1;
  transition: opacity 0.3s ease;
}

.quote-card:hover .quote-background {
  opacity: 0.3;
}

.quote-content {
  z-index: 2;
  position: relative;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  backdrop-filter: blur(5px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  width: 85%;
  max-width: 300px;
  transform: translateY(0);
  transition: transform 0.5s ease;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mature .card-wrapper:hover .quote-content {
  transform: translateY(-3px);
}

.youth .card-wrapper:hover .quote-content {
  transform: translateY(-8px);
}

.kids .card-wrapper:hover .quote-content {
  transform: translateY(-5px) rotate(2deg);
}

.quote-text {
  font-size: 1.2rem;
  line-height: 1.8;
  margin-bottom: 1.5rem;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.quote-author {
  font-size: 0.9rem;
  opacity: 0.9;
  font-style: italic;
  position: relative;
  padding-top: 0.8rem;
}

.quote-author::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 2px;
  background: currentColor;
  opacity: 0.5;
}

.quote-explanation {
  font-size: 0.85rem;
  margin-top: 0.8rem;
  opacity: 0.8;
  line-height: 1.4;
  font-style: normal;
  padding-top: 0.8rem;
  border-top: 1px dashed rgba(0, 0, 0, 0.2);
}

.card-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
  justify-content: center;
}

.btn-download-single, .btn-favorite {
  padding: 0.25rem 0.5rem;
  border: 1px solid #d4af37;
  background: #fff;
  color: #2c2c2c;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8rem;
}

.btn-favorite.active {
  background: #d4af37;
  color: #fff;
}

.batch-checkbox {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
}

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease;
}

.loading-content {
  background: rgba(255, 255, 255, 0.95);
  padding: 2.5rem;
  border-radius: 16px;
  text-align: center;
  min-width: 250px;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
  animation: scaleIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.progress-bar {
  width: 100%;
  height: 6px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  margin-top: 1.5rem;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

.progress {
  height: 100%;
  background: linear-gradient(90deg, #d4af37, #f1c40f);
  transition: width 0.3s;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.7);
  animation: pulse 1.5s infinite;
}

.ai-input-panel {
  padding: 1.5rem;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(212, 175, 55, 0.3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.input-group {
  display: flex;
  gap: 1rem;
  max-width: 600px;
  margin: 0 auto;
}

.ai-input {
  flex: 1;
  padding: 1rem 1.5rem;
  border: 2px solid rgba(212, 175, 55, 0.5);
  border-radius: 12px;
  font-size: 1rem;
  outline: none;
  transition: all 0.3s;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.ai-input:focus {
  border-color: #d4af37;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.3);
  background: white;
}

.btn-generate {
  padding: 1rem 2rem;
  background: linear-gradient(45deg, #d4af37, #f1c40f);
  color: #fff;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  transition: all 0.3s;
  white-space: nowrap;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
}

.btn-generate:hover:not(:disabled) {
  background: linear-gradient(45deg, #c19b2e, #e3b70f);
  transform: translateY(-2px);
  box-shadow: 0 7px 20px rgba(212, 175, 55, 0.5);
}

.btn-generate:disabled {
  background: linear-gradient(45deg, #cccccc, #dddddd);
  cursor: not-allowed;
  box-shadow: none;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scaleIn {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes pulse {
  0% { box-shadow: 0 0 5px rgba(212, 175, 55, 0.7); }
  50% { box-shadow: 0 0 20px rgba(212, 175, 55, 0.9); }
  100% { box-shadow: 0 0 5px rgba(212, 175, 55, 0.7); }
}

@media (max-width: 768px) {
  .cards-grid {
    grid-template-columns: 1fr;
    padding: 0.5rem;
  }
  
  .toolbar {
    flex-wrap: wrap;
    padding: 0.5rem;
  }
  
  .style-controls {
    flex-direction: column;
  }
  
  .input-group {
    flex-direction: column;
  }
  
  .ai-input {
    margin-bottom: 0.5rem;
  }
}
</style>